<template>
  <div>
    <div class="list-btn">
      提交时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
       商户名称:
       <Select v-model="params.merchant_id"  style="width:200px" clearable>
        <Option  v-for="(item,index) in merchantList" :key="index" :value="item.merchant_id">{{item.name}}</Option>
       </Select>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.page = $event; getList(url)" @changePageSize="params.pageSize = $event; getList(url)"></page-button>
    <Modal
      v-model="show"
      title="审核"
      width="550"
      :footer-hide="true"
      :closable="false"
      :mask-closable="false"
     >
      <Form ref="formRole" :model="formRole"  :label-width="110">
        <FormItem label="订单id">
          <Input v-model.trim="formRole.order_id"  style="width: 300px" disabled/>
        </FormItem>
        <FormItem label="商户名称">
          <Input v-model.trim="formRole.merchant"  style="width: 300px" disabled/>
        </FormItem>
        <FormItem label="银行卡号">
          <Input v-model.trim="formRole.bank_card"  style="width: 300px"  disabled/>
        </FormItem>
        <FormItem label="汇款公司">
          <Input v-model.trim="formRole.company"  style="width: 300px" disabled/>
        </FormItem>
        <FormItem label="充值金额(元)">
          <Input v-model.trim="formRole.amount"  style="width: 300px" disabled/>
        </FormItem>
        <FormItem label="充值凭证">
          <img :src="formRole.image" alt="" style="width:100px;height:80px;" @click="visible = true;imageUrl = formRole.image ">
        </FormItem>
        <FormItem label="审核状态">
           <Select v-model="formRole.status"  style="width:200px">
            <Option value="2">审核通过</Option>
            <Option value="3">审核拒绝</Option>
          </Select>
        </FormItem>
          <FormItem label="拒绝原因" v-if="formRole.status == '3'" class="requiredStar">
            <Input v-model="formRole.reason" style="width:300px" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入拒绝原因"  :maxlength="150"/>
        </FormItem>
      <div style="text-align:right">
        <Button @click="show = false;resetValidate('formRole');" style="margin-right:2px">取消</Button>
        <Button type = "primary" @click="submitModal">确定</Button>
      </div>
      </Form>
    </Modal>
    <Modal title="查看图片" v-model="visible"  class="viewImg"  :footer-hide="true">
      <img :src="imageUrl" v-if="visible">
       <div style="text-align:right">
        <Button type = "primary" @click="visible = false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import base64 from 'js-base64'
  let Base64 = base64.Base64;
  let Authorization = 'Basic '+Base64.encode(sessionStorage.getItem('tokenId')+':'+sessionStorage.getItem('token'))
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
    },
    data () {
      return {
        tag: {
          'title': '审核列表',
          'path': '/work/audit/list'
        },
       show:false,
       visible:false,
       imageUrl:'',
       formRole:{},
       uploadUrl: `${this.$http.defaults.baseURL}/merchant/photo`,
       imageUrl:'',
       rules:{
          cardNum: [
            { required: true, message: '请输入银行卡号', trigger: 'blur'}
          ],
          company: [
            { required: true, message: '请输入汇款公司', trigger: 'blur'}
          ],
          amount: [
            { required: true, message: '请输入充值金额', trigger: 'blur'}
          ],
          image: [
            { required: true, message: '请选择图片', trigger: 'blur' }
          ],
       },
       headers:{
          "ua":'1;1.0.0;API0;web',
          "Authorization":Authorization
       },
       listTitle: [
        {
          title: "提交时间",
          key: "add_time",
          align: "center",
          minWidth:140,
          render: (h, params) => {
            return h("div", params.row.add_time)
          }
        },
        // {
        //   title: "订单ID",
        //   key: "order_id",
        //   align: "center",
        //   minWidth:80,
        // },
        {
          title: "商户名称",
          key: "merchant",
          align: "center",
          minWidth:80,
        },
        {
          title: "银行卡号",
          key: "bank_card",
          align: "center",
          minWidth:180,
          render:(h,parmas) => {
            let card = parmas.row.bank_card;
            let ncard = '';
            for(var n=0;n<card.length;n=n+4){
              ncard += card.substring(n,n+4)+" ";
            }
            return h('div',ncard)
          }
        },
         {
          title: "汇款公司",
          key: "company",
          align: "center",
          minWidth:80,
        },
        {
          title: "充值金额(元)",
          key: "amount",
          align: "center",
          minWidth:90,
          render: (h, params) => {
            return h('div', this.toYuan(params.row.amount))
          }
        },
        {
          title: "充值凭证",
          key: "image",
          align: "center",
          minWidth:100,
          render:(h,params) => {
            return h('img',
              {
                attrs: {
                  src:params.row.image,
                },
                style:{
                  width:'80px',
                  height:'38px',
                  textAlign:'center',
                  verticalAlign:'middle'
                },
                on:{
                  click:() => {
                    // window.open(params.row.image)
                    this.visible = true;
                    this.imageUrl = params.row.image;
                  }
                }
            })
          }
        },
        {
          title: "审核人",
          key: "auth_name",
          align: "center",
          minWidth:90,
          render:(h,params) =>{
            return h('div',params.row.auth_name ? params.row.auth_name : '—');
          }
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          minWidth:80,
          render:(h,params) => {
            let color = '';
            let text = '';
            switch(params.row.status){
              case '1':
                color = '#f90';
                text = '待审核';
                break;
              case '2':
                color = '#19be6b';
                text = '审核通过';
                break;
              case '3':
                color = '#ed4014';
                text = '审核拒绝';
                break;
            }
            return h('div',{
              style:{
                color:color
              }
            },text)
          }
        },
        {
          title: "拒绝原因",
          key: "reason",
          align: "center",
          minWidth:120,
          className:'ellipsis',
          render:(h,params) => {
            if(params.row.reason){
              return h('Tooltip',
              {
                props:{
                  'max-width':200,
                  'content':params.row.reason
                }
              },
              [
                h('div',
                {
                  attrs:{
                    class:'ellipsis'
                  }

                },params.row.reason)
              ])
            }else{
               return h('div', '—' )
            }
          }
        },
        {
          title: "操作",
          key: "action",
          minWidth: 100,
          align: "center",
          render: (h, params) => {
            let disabled = true;
            if(params.row.status == '1'){
              disabled = false;
            }else{
               disabled = true;
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    disabled:disabled
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show = true;
                      this.resetValidate('formRole');
                      // this.formRole.order_id = params.row.order_id
                      this.formRole = JSON.parse(JSON.stringify(params.row));
                      this.formRole.amount = this.toYuan(this.formRole.amount);
                      this.formRole.status = '3';
                      this.formRole.bank_card = params.row.bank_card.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');
                    }
                  }
                },
                "审核"
              ),
            ]);
          }
        }

      ],
      list:[],
        url:'/merchant/auditList',
        nameListUrl: '',
        params: {
          page: 1,
          pageSize: 10
        },
      }
    },
    mounted() {
      this.getmerchantList();
    },
    methods: {
      changeCard(e){
        console.log(e,'card');
      },
      submitModal(){
        let titleType = ''
        if(this.formRole.status == 2){
          titleType = '审核通过'
        }else{
          titleType = '审核拒绝'
        }
        let data = {
          order_id:this.formRole.order_id,
          status:this.formRole.status,
          reason:this.formRole.reason
        }
        if(this.formRole.status == 2){
            this.$Modal.confirm({
              title: '提示',
              content: `<p style="font-size:16px">确定要${titleType}吗？</p>`,
              onOk: () => {
              this.$post('/audit/audit',data).then(res => {
                console.log(res,'审核');
                if(res.code == 0){
                  // this.$Message.success(res.msg);
                  this.show = false;
                  this.resetValidate('formRole');
                  this.$Message.success("审核完成");
                  this.getList(this.url)
                }else{
                  this.$Message.error(res.msg);
                  this.show = false;
                  this.resetValidate('formRole');
                }
              })
            },
            onCancel: () => {

            }
          });
        }else if(this.formRole.status == 3){
          if(this.formRole.reason && this.formRole.reason.length > 0){
               this.$Modal.confirm({
                  title: '提示',
                  content: `<p style="font-size:16px">确定要${titleType}吗？</p>`,
                  onOk: () => {
                  this.$post('/audit/audit',data).then(res => {
                    console.log(res,'审核');
                    if(res.code == 0){
                      // this.$Message.success(res.msg);
                      this.show = false;
                      this.resetValidate('formRole');
                      this.$Message.success("审核完成");
                      this.getList(this.url)
                    }else{
                      this.$Message.error(res.msg);
                      this.show = false;
                      this.resetValidate('formRole');
                    }
                  })
                  },
                  onCancel: () => {

                  }
                });
          }else{
            this.$Message.error('拒绝原因不能为空')
          }
        }
      },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

  /deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: inline-block;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
.viewImg{
  overflow: auto;
  img{
    width:100%;
  }
}
/deep/ .ivu-input[disabled]{
  color:#666;
}
/deep/ .requiredStar .ivu-form-item-label:before {
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ed4014;
}
/deep/ .ellipsis{
  width:100px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

</style>
